<!--
 * @Author: byron
 * @Date: 2021-09-25 21:56:32
 * @LastEditTime: 2021-09-28 19:04:51
-->
<template>
    <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item, index) in banners" :key="index">
            <img v-lazy="$utils.genImgURL(item.imageUrl, 1000, 400)" alt="" />
        </el-carousel-item>
    </el-carousel>
</template>

<script>
import { getBanner } from '@/api'

export default {
    components: {},
    props: {},
    data() {
        return {
            banners: [],
        }
    },
    watch: {},
    computed: {},
    methods: {},
    async created() {
        const { banners } = await getBanner()
        this.banners = banners
    },
    mounted() {},
}
</script>
<style lang="scss" scoped>
img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
</style>
